<template>
    <div>
        <v-header title="个人信息"></v-header>
        <div class="page">
            <v-left left="头像">
                <img class="logo" :src="imgSrc" alt="头像">
            </v-left>
            <hr>
            <v-left left="昵称">我是谁</v-left>
        </div>
        <div class="page">
            <v-left left="性别">男</v-left>
            <hr>
            <v-left left="手机号">13456789023</v-left>
        </div>
        <div class="page">
            <v-left left="修改登录密码" @click.native="$router.push('/ChangePassword');"></v-left>
            <hr>
            <v-left left="忘记登录密码" @click.native="$router.push('/password');"></v-left>
            <hr>
            <v-left left="忘记交易密码" @click.native="$router.push('/DealPassword');"></v-left>
        </div>
        <div class="btn">
            <input-button text='退出' color='#fb7d3f' @click.native="exit()"></input-button>
        </div>
    </div>
</template>

<script>
import * as Types from "../../../Store/types.js";
import { delCookie } from "../../../Tools/cookie.js";
import vLeft from "../../Common/vLeft";
import vHeader from "../../Common/vHeader";
import InputButton from "../../Common/InputButton";
export default {
  data() {
    return {
      imgSrc: require("../../../assets/logo.png")
    };
  },
  methods: {
    exit() {
      this.$store.commit(Types.VAILD_LOGIN, false);
      delCookie("userName");
      this.$router.push("/");
    }
  },
  components: {
    vLeft,
    vHeader,
    InputButton
  }
};
</script>

<style scoped>
.page {
  padding: 0 5vw 1vw 5vw;
  background: #f5f5f9;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #ebe8e8;
}
hr {
  border-left: none;
  border-top: 1px solid #ebe8e8;
}
.logo {
  height: 2rem;
  width: 2rem;
  border-radius: 1rem;
  border: 1px solid #ffffff;
  margin-top: 0.5rem;
  background-color: #fff;
}
.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5vh;
}
</style>